import React from 'react';
import type { RootState, AppDispatch } from '../..';
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from './counterSlice';

export const Counter = () => {
  // MARK: 7、 通过 useSelector 使用 state
  const count = useSelector((state: RootState) => state.counter.value);
  // MARK: 8、 通过 useDispatch 调用 actions
  const dispatch = useDispatch<AppDispatch>();

  return (
    <div>
      <div>
        <button onClick={() => {
          dispatch(increment());
        }}>Increment</button>
        <span>{count}</span>
        <button onClick={() => {
          dispatch(decrement());
        }}>Decrement</button>
      </div>
    </div>
  );
  
};
